<template>
  <div
    class="check-page flexbox flex-tb flex-center bg-center bg-no-repeat lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav />
    </div>
    <div class="pc-login-header">
      <div class="flexbox flex-align-center flex-justify-between flex-1">
        <NuxtLink :to="localePath('/')">
          <img
            loading="lazy"
            class="logo"
            src="https://cd.sealmg.com/assets/img/logo-img.png"
            alt="SEALMG logo"
            title="SEALMG company logo"
            srcset=""
          />
        </NuxtLink>
        <Langes langTheme="white2" :onlyLange="false" />
      </div>
    </div>

    <div class="check-box flexbox flex-tb flex-align-center lg:px-[75px] lg:py-[30px] lg:gap-4 gap-3 p-4">
      <div class="flex flex-col justify-center items-center">
        <img class="top-icon" src="~/assets/img/ico_Email_88@3X.png" alt="Email verification icon" title="Verify email address" />
        <div class="title text-center">{{ $t('pages.enterNewEmail') }}</div>
      </div>

      <div class="form !w-full">
        <el-form label-position="top" label-width="80px" :model="form" @submit.native.prevent>
          <el-form-item :label="$t('formItem.email')">
            <el-input v-model="form.email" type="email" disabled readonly :placeholder="$t('formPlaceholder.input')" @keyup.enter.native="submitLink">
              <img
                slot="prefix"
                class="input-icon"
                alt="Email input icon"
                title="Email field icon"
                src="https://cd.sealmg.com/assets/img/email-icon.png"
              />
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="desc text-left !w-full flex flex-col gap-2">
        <div>
          1, {{ $t('pages.codeSentTo') }}
          {{ form.email }}
          {{ $t('pages.codeSentTo1') }},
        </div>
        <div>
          2, {{ $t('pages.clickToVerifyProcess') }}
          <span class="text-[#FF4E33]">
            {{ $t('pages.checkSpamFolder') }}
          </span>
        </div>
      </div>
      <el-button class="theme-btn !mt-5" :disabled="form.email ? false : true" @click="submitLink">{{ $t('register.checkEmail') }}</el-button>
    </div>
    <div class="mt-4"></div>
    <base-info />
    <!-- <el-dialog title="" :show-close="false" class="" :visible.sync="showCheck" top="20vh">
      <div class="flex flex-col gap-4">
        <div class="text-[24px] text-[#141414] font-medium text-center">{{ $t('pages.emailNotification') }}</div>
        <div class="text-[14px] text-[#999999] font-medium text-center">{{ $t('pages.checkSpamBox') }}</div>
        <div class="lg:g:gap-6 grid grid-cols-3 gap-2">
          <div class="col-span-1">
            <button
              class="font-medium w-full text-[16px] text-[#262626] lg:h-[45px] h-[40px] bg-[#FFFFFF] rounded-[24px] border text-nowrap"
              @click="showCheck = false"
            >
              {{ $t('formBtn.cancel') }}
            </button>
          </div>
          <div class="col-span-2" @click="submitLink">
            <button class="font-medium w-full text-[16px] text-[#FFFFFF] lg:h-[45px] h-[40px] bg-[#FF4E33] rounded-[24px] text-nowrap">
              {{ $t('formBtn.confirm') }}
            </button>
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
  import FnNav from '@/components/mobile/FnNav'
  export default {
    name: 'check',
    components: {
      FnNav
    },
    data() {
      return {
        form: {
          email: ''
        },
        showCheck: false
      }
    },
    created() {
      let query = this.$route.query
      if (query.email) {
        this.form.email = query.email
      }
    },
    computed: {
      initData() {
        return this.$store.state.initData.initData || {}
      }
    },
    methods: {
      golink() {
        if (process.client) {
          window.open('https://beian.miit.gov.cn/#/Integrated/index')
        }
      },
      getEmailServerUrl(email) {
        let serverMap = {
          'qq.com': 'http://mail.qq.com',
          'vip.sina.com': 'http://mail.sina.com.cn',
          'sina.com': 'http://mail.sina.com.cn',
          '163.com': 'http://mail.163.com',
          '126.com': 'http://mail.126.com',
          'vip.163.com': 'http://vipmail.163.com/',
          'vip.126.com': 'http://vipmail.163.com/',
          'yeah.net': 'http://www.yeah.net/',
          'sohu.com': 'http://mail.sohu.com/',
          'tom.com': 'http://mail.tom.com/',
          '139.com': 'http://mail.10086.cn/',
          'live.com': 'http://login.live.com/',
          '189.com': 'http://webmail16.189.cn/',
          'eyou.com': 'http://www.eyou.com/',
          '21cn.com': 'http://mail.21cn.com/',
          '188.com': 'http://www.188.com/',
          'yahoo.com': 'http://login.yahoo.com',
          // 添加国外常用邮箱
          'gmail.com': 'https://mail.google.com',
          'outlook.com': 'https://outlook.live.com',
          'hotmail.com': 'https://outlook.live.com',
          'msn.com': 'https://outlook.live.com',
          'icloud.com': 'https://www.icloud.com/mail',
          'me.com': 'https://www.icloud.com/mail',
          'mac.com': 'https://www.icloud.com/mail',
          'aol.com': 'https://mail.aol.com',
          'protonmail.com': 'https://mail.proton.me',
          'zoho.com': 'https://mail.zoho.com',
          'yandex.com': 'https://mail.yandex.com',
          'mail.com': 'https://www.mail.com/mail'
        }
        let server = email.split('@')[1]
        return serverMap[server] || ''
      },
      submitLink() {
        let url = this.getEmailServerUrl(this.form.email)
        if (process.client && url) {
          window.open(url)
          //window.location.href = url
        } else {
          this.$router.replace({
            path: this.localePath('/login')
          })
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .el-dialog {
    background: @color-ff;
    border-radius: 12px;
    @apply lg:w-[400px] w-4/5;
  }
  /deep/ .el-dialog__header,
  .el-dialog__footer {
    padding: 0;
  }
  .check-page {
    position: relative;
    width: 100%;
    height: 100vh;
    .login-header {
      display: none;
    }
    .pc-login-header {
      display: block;
      width: 572px;
      margin-bottom: 8px;
      .logo {
        width: 157px;
        height: 46px;
      }
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
  }
  .check-box {
    width: 572px;
    // height: 574px;
    background: @color-ff;
    box-shadow: 0px 16px 32px 0px rgba(12, 3, 0, 0.06);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    .top-icon {
      // margin-top: 75px;
      width: 88px;
      height: 88px;
    }
    .title {
      font-weight: 600;
      font-size: 24px;
      color: @font-color-26;
    }
    .desc {
      // margin-top: 8px;
      // text-align: center;
      // max-width: 300px;
      font-weight: 500;
      font-size: 14px;
      color: @font-color-99;
    }
    .form {
      .el-form-item {
        margin-bottom: 0px !important;
      }
      /deep/ .el-form--label-top .el-form-item__label {
        font-weight: 500;
        font-size: 12px;
        color: @font-color-99;
        line-height: 20px;
        padding: 0;
        margin-bottom: 6px;
      }
      /deep/ .el-input__inner {
        height: 48px;
        color: @font-color-14;
        border: @border-1-f7;
        background: @color-f7;
      }
      /deep/ .el-input--prefix .el-input__inner {
        padding-left: 54px;
      }
      /deep/ .el-input__prefix {
        left: 12px;
      }
      .input-icon {
        width: 24px;
        height: 24px;
        //   position: absolute;
        //   top: 50%;
        //   transform: translateY(-50%);
      }
      /deep/ .el-input__prefix {
        @apply flex items-center;
      }
      .theme-btn {
        height: 50px;
        margin-top: 9px;
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .check-page {
      position: relative;
      width: 100%;
      height: 100vh;
      .login-header {
        display: none;
      }
      .pc-login-header {
        display: block;
        width: 700px;
        margin-bottom: 8px;
        .logo {
          width: 157px;
          height: 46px;
        }
      }
      .page-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
      }
      .pc-page-bg {
        display: block;
      }
      .mobile-page-bg {
        display: none;
      }
    }
    .check-box {
      width: 572px;
      height: 474px;
      background: @color-ff;
      box-shadow: 0px 16px 32px 0px rgba(12, 3, 0, 0.06);
      border-radius: 32px;
      .top-icon {
        // margin-top: 75px;
        width: 88px;
        height: 88px;
      }
      .title {
        font-weight: 600;
        font-size: 24px;
        color: @font-color-26;
      }
      .desc {
        margin-top: 8px;
        text-align: center;
        max-width: 300px;
        font-weight: 500;
        font-size: 12px;
        color: @font-color-99;
      }
      .form {
        width: 371px;
        .el-form-item {
          margin-bottom: 0px !important;
        }
        /deep/ .el-form--label-top .el-form-item__label {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
          padding: 0;
          margin-bottom: 6px;
        }
        /deep/ .el-input__inner {
          height: 48px;
          color: @font-color-14;
        }
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 54px;
        }
        /deep/ .el-input__prefix {
          left: 12px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
        }
        .theme-btn {
          height: 50px;
          margin-top: 9px;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .check-page {
      justify-content: flex-start;
      .pc-page-bg {
        display: none;
      }
      .pc-login-header {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-header {
        display: block;
      }
    }
    .check-box {
      width: 375px;
      height: auto;
      background: transparent;
      box-shadow: none;
      .top-icon {
      }
      .title {
        font-weight: 500;
        color: @font-color-14;
      }
      .desc {
        font-size: 14px;
        color: @font-color-99;
      }
      .form {
        width: 343px;
        .el-form-item {
          margin-bottom: 0px !important;
        }
        /deep/ .el-form--label-top .el-form-item__label {
          font-weight: 500;
          font-size: 12px;
          color: @font-color-99;
          line-height: 20px;
          padding: 0;
          margin-bottom: 6px;
        }
        /deep/ .el-input__inner {
          height: 48px;
          font-size: 14px;
          color: @font-color-14;
        }
        /deep/ .el-input--prefix .el-input__inner {
          padding-left: 54px;
        }
        /deep/ .el-input__prefix {
          left: 12px;
        }
        .input-icon {
          width: 24px;
          height: 24px;
        }
        .theme-btn {
          height: 48px;
          line-height: 48px;
          margin-top: 12px;
        }
        .mobile-btn {
          display: block;
        }
        .pc-btn {
          display: none;
        }
      }
    }
    /deep/.base-info {
      position: absolute;
      left: 50%;
      bottom: 86px;
      width: 375px;
      transform: translateX(-50%);
    }
  }
</style>
